<template>
  <div>
    <!-- @open='handleOpen'  -->
    <el-dialog
      @closed="handleClose"
      :visible.sync="AddCommandDialog"
      :lock-scroll="false"
      close-on-press-escape
      v-dialogDrag
      title="添加命令"
      :close-on-click-modal="false"
    >
      <el-tabs :tab-position="tabPosition" class="tabHight">
        <el-tab-pane label="详情">
          <el-form
            :model="commendForm"
            :rules="rules"
            ref="commendForm"
            label-width="80px"
            class="tabHight_auto"
            size="mini"
          >
            <el-form-item label="Token" prop="commandtoken">
              <el-input
                v-model="commendForm.commandtoken"
                placeholder="请输入token"
              ></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="commandname">
              <el-input
                v-model="commendForm.commandname"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="命名空间" prop="commandspace">
              <el-input
                v-model="commendForm.commandspace"
                placeholder="请输入命名空间"
              ></el-input>
            </el-form-item>
            <el-form-item label="说明" prop="explain">
              <el-input
                type="textarea"
                v-model="commendForm.explain"
                placeholder="请输入说明"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="参数">
          <Parameter
            ref="uploadParameter"
            :editParameter="editParameter"
            :isParameter="isParameter"
            @sendParameter="sendparameter"
          />
        </el-tab-pane>

        <el-tab-pane label="元数据">
          <MetaData
            ref="upoadMetaData"
            :editmetaData="editmetaData"
            :isedit="isedit"
            @sendmetaDatas="sendmetaData"
          />
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button
          :loading="btnLoading"
          size="mini"
          type="primary"
          @click="submitForm('commendForm')"
          style="background: #2680d2"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MetaData from "../../opensite/metaData.vue";
import Parameter from "./Parameter.vue";
import { TOKEN_RULES } from "@/utils/local";
import { addCommand } from "@/api/deviceType";
export default {
  props: {
    deviceTypeToken: {
      type: String,
      default: "",
    },
    addcommandshow: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    MetaData,
    Parameter,
  },
  data() {
    return {
      btnLoading: false,
      AddCommandDialog: false,
      tabPosition: "left",
      commendForm: {
        commandtoken: "",
        commandname: "",
        commandspace: "",
        explain: "",
      },
      rules: {
        commandtoken: TOKEN_RULES,
        commandname: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        commandspace: [
          { required: true, message: "请输入命名空间", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      // deviceTypeToken: this.$route.query.deviceTypeToken,
      commandsList: [],
      isedit: false, //true为编辑页进入，false为添加页进入
      editmetaData: [],
      metaDataJson: {},
      parameter: [],
      editParameter: [],
      isParameter: false,
    };
  },
  watch: {
    addcommandshow(oldVal, newVal) {
      this.AddCommandDialog = this.addcommandshow;
    },
  },
  mounted() {},
  methods: {
    // 关闭
    handleClose() {
      this.$emit("changeShow", "false");
      this.commendForm = {
        commandtoken: "",
        commandname: "",
        commandspace: "",
        explain: "",
      };
      this.metaDataJson = {};
      this.editmetaData = [];
      this.$refs.upoadMetaData.clearMeteDada();
      this.$refs.uploadParameter.clearData();
    },
    cancel() {
      this.handleClose();
    },
    // 提交
    submitForm(commendForm) {
      this.$refs[commendForm].validate((valid) => {
        if (valid) {
          let formData = {};
          formData.token = this.commendForm.commandtoken;
          formData.name = this.commendForm.commandname;
          formData.namespace = this.commendForm.commandspace;
          formData.description = this.commendForm.explain;
          formData.deviceTypeToken = this.deviceTypeToken;
          formData.metadata = this.metaDataJson;
          formData.parameters = this.parameter;
          this.btnLoading = true;
          addCommand(formData, this.deviceTypeToken)
            .then((res) => {
              this.$msg({
                type: "success",
                message: "操作成功!",
              });
              this.$emit("updateCommandsList");
              this.commendForm = {
                commandtoken: "",
                commandname: "",
                commandspace: "",
                explain: "",
              };
              this.$refs.upoadMetaData.clearMeteDada();
              this.metaDataJson = {};
              this.editmetaData = [];
              this.$refs.uploadParameter.clearData();
              this.AddCommandDialog = false;
            })
            .finally((f) => {
              this.btnLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 获取命令列表

    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },
    // 参数回传
    sendparameter(md) {
      this.parameter = md;
    },
  },
};
</script>

<style>
</style>